<template>
	<view class="app app-bg">
		<view class="types">
			<view class="item" v-for="item in arr" :key="item.type" @tap="type = item.type">
				<text>{{ item.text }}</text>
				<image
					class="icon"
					v-if="type == item.type"
					src="@/static/home/choose.png"
				></image>
				<image class="icon" v-else src="@/static/home/choose_no.png"></image>
			</view>
		</view>
		<view class="main">
			<view class="title">取消原因</view>
			<u-input
				v-model="cancel_text"
				type="textarea"
				height="150"
				:custom-style="custom"
			/>
			<view class="title">图片</view>
			<image
				class="img"
				v-if="cancel_img"
				mode="aspectFill"
				:src="cancel_img"
				@tap="choose"
			></image>
			<image class="img" v-else src="@/static/mine/img_add.png" @tap="choose"></image>
		</view>
		<view class="btn" @tap="send">确认</view>
	</view>
</template>

<script>
var vk = uni.vk

export default {
	data() {
		return {
			oid: "",
			arr: [
				{ text: "不想下单了", type: 1 },
				{ text: "临时有事走不开", type: 2 },
				{ text: "订单信息填错了", type: 3 }
			],
			type: 1,
			cancel_text: "",
			custom: {
				padding: "10px",
				borderRadius: "10rpx",
				backgroundColor: "#f5f5f5"
			},
			cancel_img: ""
		}
	},
	onLoad(opt) {
		this.oid = opt.id
	},
	methods: {
		// 选择图片
		choose() {
			uni.chooseImage({
				count: 1,
				sourceType: ["album"],
				success: res => {
					vk.uploadFile({
						title: "上传中...",
						filePath: res.tempFilePaths[0],
						suffix: "png",
						provider: "unicloud",
						success: res => {
							this.cancel_img = res.url
						}
					})
				}
			})
		},
		// 发送
		send() {
			const { oid, type, cancel_text, cancel_img } = this
			if (!cancel_text) {
				return vk.toast("请输入取消原因")
			}
			vk.callFunction({
				url: "client/order.cancelMyOrderQuery",
				title: "请求中...",
				data: {
					oid,
					cancel_img,
					cancel_text,
					type: this.arr[type - 1].text
				}
			}).then(() => {
				vk.toast("已提交申请", "none", 1000, () => {
					vk.navigateBack()
					uni.$emit("paySuccess")
					uni.$emit("paySuccessTab")
				})
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.app {
	padding: 20rpx;
}

.types {
	border-radius: 12rpx;
	padding: 6rpx 24rpx;
	background-color: #fff;
	.item {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
	}
	.icon {
		width: 40rpx;
		height: 40rpx;
		margin-left: 20rpx;
	}
}

.main {
	border-radius: 12rpx;
	padding: 4rpx 24rpx;
	background-color: #fff;
	margin-top: 20rpx;
	.title {
		font-size: 28rpx;
		font-weight: bold;
		padding: 26rpx 0 18rpx;
	}
	.img {
		width: 160rpx;
		height: 160rpx;
		margin-bottom: 20rpx;
		border-radius: 6rpx;
	}
}

.btn {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	border-radius: 40rpx;
	background-color: #3ab54a;
	color: #fff;
	font-size: 32rpx;
	margin: 168rpx 0;
}
</style>
